import * as React from "react";
import {
    Box,
    Button,
    Paper,
    Stack,
    Table,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    TextField
} from "@mui/material";
import {useState} from "react";
import {useAddEmployee} from "../hooks/useAddEmployee.ts";
import {useDeleteEmployee} from "../hooks/useDeleteEmployee.ts";
import {useEmployeeInformation} from "../hooks/useEmployeeInformation.ts";

interface Data {
    id: string;
    name: string;
    phone_number: string;
}

const Employees: React.FC = () => {
    const {employeeInformation, data, error2} = useEmployeeInformation();
    const [attendanceData, setAttendanceData] = React.useState<Data[]>([]);

    React.useEffect(() => {
        const fetchAttendance = async () => {
            await employeeInformation();
            if (error2) {
                console.log(error2);
                return;
            }
            if (data) {
                const dataArray: Data[] = JSON.parse(data);
                setAttendanceData(dataArray);
            }
        };
        fetchAttendance();
    }, [data]);

    const [deleteEmployeeText, setDeleteEmployeeText] = useState('删除员工');
    const [deleteEmployeeId, setDeleteEmployeeId] = useState('');
    const [deleteEmployeeName, setDeleteEmployeeName] = useState('');
    const {deleteEmployee, isLoading1, error1} = useDeleteEmployee();

    const handleDeleteEmployee = async () => {
        await deleteEmployee(deleteEmployeeId, deleteEmployeeName);
        if (error1) {
            setDeleteEmployeeText(error1);
            setTimeout(() => {
                setDeleteEmployeeText('删除员工');
            }, 3000);
            return;
        }

        setDeleteEmployeeText('删除成功');
        setTimeout(() => {
            setDeleteEmployeeText('删除员工');
        }, 3000);
    }

    const [addEmployeeText, setAddEmployeeText] = useState('新增员工');
    const [name, setName] = useState('');
    const [id, setId] = useState('');
    const [phoneNumber, setPhoneNumber] = useState('');
    const {addEmployee, isLoading, error} = useAddEmployee();

    const handleAddEmployee = async () => {
        await addEmployee(id, name, phoneNumber);
        if (error) {
            setAddEmployeeText(error);
            setTimeout(() => {
                setAddEmployeeText('新增员工');
            }, 3000);
            return;
        }

        setAddEmployeeText('新增成功');
        setTimeout(() => {
            setAddEmployeeText('新增员工');
        }, 3000);
    }


    return (
        <Box>
            <Stack direction="row" spacing={3} sx={{marginTop: 1, marginBottom: 1, justifyContent: 'space-between'}}>
                <Stack direction="row" spacing={3}>
                    {/*新增员工姓名*/}
                    <TextField label="新增员工的姓名" variant="standard"
                               onChange={(e) => setName(e.target.value)}/>
                    {/*新增员工工号*/}
                    <TextField label="新增员工的工号" variant="standard"
                               onChange={(e) => setId(e.target.value)}/>
                    <TextField label="新增员工的电话号码" variant="standard"
                               onChange={(e) => setPhoneNumber(e.target.value)}/>
                    {/*新增员工按钮*/}
                    <Button variant="contained"
                            disabled={isLoading}
                            onClick={handleAddEmployee}
                            sx={{
                                backgroundColor: '#21C491',
                                '&:hover': {backgroundColor: '#1EB384'}
                            }}>{addEmployeeText}</Button>
                </Stack>
                <Stack direction="row" spacing={3}>
                    {/*删除员工工号*/}
                    <TextField label="删除员工的工号" variant="standard"
                               onChange={(e) => setDeleteEmployeeId(e.target.value)}/>
                    {/*删除员工姓名*/}
                    <TextField label="删除员工的姓名" variant="standard"
                               onChange={(e) => setDeleteEmployeeName(e.target.value)}/>
                    {/*删除员工按钮*/}
                    <Button variant="contained"
                            disabled={isLoading1}
                            onClick={handleDeleteEmployee}
                            sx={{
                                backgroundColor: '#21C491',
                                '&:hover': {backgroundColor: '#1EB384'}
                            }}>{deleteEmployeeText}</Button>
                </Stack>
            </Stack>
            <TableContainer component={Paper}>
                <Table sx={{minWidth: 350}}>
                    <TableHead>
                        {/*表头*/}
                        <TableRow>
                            <TableCell>工号</TableCell>
                            <TableCell>姓名</TableCell>
                            <TableCell>电话号码</TableCell>
                        </TableRow>
                    </TableHead>

                    <tbody>
                    {attendanceData.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.phone_number}</TableCell>
                        </TableRow>
                    ))}
                    </tbody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default Employees;
